<!-- 品牌管理 -->
<template>
  <div class="kind-main">
    <!-- 搜索框开始 -->
    <el-card>
      <div slot="header">
        <span>品牌条件搜索</span>
      </div>
      <el-row :gutter="30">
        <el-col :span="6">
          <el-input v-model="search.cname" placeholder="根据名称查询"></el-input>
        </el-col>
        <el-col :span="6">
          <el-input v-model="search.addTime" placeholder="根据添加时间查询"></el-input>
        </el-col>
        <el-col :span="6" :offset="6" style="text-align:right">
          <el-button type="primary" @click="doSearch" size="small">搜索</el-button>
        </el-col>
      </el-row>
    </el-card>

    <!-- 品牌列表展示 -->
    <el-card>
      <div slot="header">
        <span>品牌列表页</span>
        <el-button type="primary" size="small" style="float:right" @click="doBrandAdd">新增</el-button>
      </div>
      <el-table :data="brandList" border style="width: 90%;margin-left:5%" v-loading="loading">
        <el-table-column align="center" fixed type="index" label="#" width="80"></el-table-column>
        <el-table-column align="center" prop="coverImg" label="封面图片" width="190">
          <template slot-scope="scope">
            <el-image style="width: 140px; height: 140px" :src="scope.row.coverImg"></el-image>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="cname" label="品牌中文名称" width="180"></el-table-column>
        <el-table-column align="center" prop="ename" label="品牌英文名称" width="180"></el-table-column>
        <el-table-column align="center" prop="descr" label="品牌描述" width="180"></el-table-column>
        <el-table-column align="center" prop="addTime" label="添加时间" width="160"></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="115">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="doEdit(scope.row.id)">编辑</el-button>
            <el-button type="text" size="small" style="color:red" @click="doDel(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="margin:20px 0;float:right"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.start"
        :page-sizes="page.sizes"
        :page-size="page.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.totalCount"
      ></el-pagination>
    </el-card>

    <!-- 弹窗页 -->
    <Detail ref="detail" @refresh-brand="getBrandList"></Detail>
  </div>
</template>

<script>
import brandApi from "@/api/product/brand";
import Detail from "@/views/product/brand/Detail";
import _ from 'lodash'
export default {
  name: "productBrand",
  loading:false,
  components: {
    Detail,
  },
  data() {
    return {
      brandList: [],
      search: {},
      page: {
        start: 1,
        limit: 10,
        sizes: [10, 20, 30],
        totalCount: 0,
      },
    };
  },
  created() {
    this.getBrandList();
  },
  methods: {
    getBrandList() {
      //获取品牌列表
      this.loading=true
      var params = {
        start: this.page.start,
        limit: this.page.limit,
        ...this.search,
      };

      params=_.pickBy(params,item=>item);
      _.pickBy(params,function(v){
          return v
      })

      brandApi.brandList(params).then((res) => {
        this.brandList = res.data.list;
        this.page.totalCount = res.data.totalRow;
        this.loading=false

      });
    },
    handleSizeChange(val) {
      this.page.limit = val;
      this.getBrandList();
    },
    handleCurrentChange(val) {
      this.page.start = val;
      this.getBrandList();
    },
    doSearch() {
      //搜索
      this.page.start= 1;
      this.getBrandList();
    },
    doEdit(id) {
      //编辑
      this.$refs.detail.opendialogEdit(id);
    },
    doDel(id) {
      //删除
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          brandApi.brandDel({id}).then((res) => {
            var index = this.brandList.findIndex((item) => {
              item.id == id;
            });
            this.brandList.splice(index, 1);
            this.getBrandList();
          });
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    doBrandAdd() {
      //新增品牌
      this.$refs.detail.opendialog(); //调用子组件的opendialog方法
    },
  },
};
</script>
<style lang='scss' scoped>
.kind-main {
  .el-card {
    margin: 30px;
  }
}
</style>